<template>
	<!-- 请假表单页面 -->
	<view>
		<view>
			<!-- 上方留白 -->
			<view style="width: 100%; height: 20rpx;"></view>

			<!-- 是否补假 -->
			<view class="wrap">
				<view class="caption">请假信息</view>
				<u-line color="#d4d4d4" />
				<view class="indent">
					<u-form-item :border-bottom="false" label="*是否补假" prop="leave_info" label-width="150">
						<u-radio-group v-model="is_additional_leave">
							<view class="u-font-lg"></view>
							<u-radio style="margin-left: 100rpx;" shape="circle" v-for="(item, index) in radioList"
								:key="index" :name="item.name">{{ item.name }}</u-radio>
						</u-radio-group>
					</u-form-item>
				</view>

			</view>

			<view class="wrap" style="margin-top: 20rpx;">
				<view class="caption">申请内容</view>
				<u-line color="#d4d4d4" />
				<view class="indent">

					<view style="font-size: 16px; margin-top: 24rpx;">*请假周期</view>
					<u-form-item class="u-p-l-20" label="*起始时间" prop="leave_info" label-width="150"
						label-position="top">
						
						<button class="picker" :class="{'warn-center':startTimeValidator}" 
						@click="start_time_picker_show = true">{{ start_time }}</button>
						
						<u-picker mode="time" v-model="start_time_picker_show" :params="time_params"
							@confirm="startTimeConfirm">
						</u-picker>
					</u-form-item>
					
					<u-form-item class="u-p-l-20" label="*结束时间" prop="leave_info" label-width="150"
						label-position="top">

						<button class="picker" :class="{'warn-center':endTimeValidator}" 
								@click="end_time_picker_show = true">{{ end_time }}</button>
						<u-picker mode="time" v-model="end_time_picker_show" :params="time_params"
							@confirm="endTimeConfirm">
						</u-picker>
					</u-form-item>


					<u-form-item label="*请假类型" prop="leave_info" label-width="150" label-position="top">

						<view style="display: flex;  disflex-direction: row;">
							<button v-for="(type,index) in leave_type" :key="index"
								:class="{active: curIndex === index}" class="leave-type" @click="curIndex = index">
								{{ type.name }}
							</button>
						</view>
					</u-form-item>

					<u-form-item label="*请假去向" prop="leave_info" label-width="150" label-position="top">

						<button class="picker" :class="{'warn-center':destinationValidator}"
						@click="destination_picker_show = true">{{region}}</button>
						<u-picker mode="region" v-model="destination_picker_show" @confirm="regionConfirm"
							:area-code='["43", "4301", "430103"]'>
							<!-- 默认湖南长沙 -->
						</u-picker>
					</u-form-item>

					<u-form-item label="*请假原因" prop="leave_info" label-width="150" label-position="top">
						
						<view style="display: flex; flex-direction: column;">
							<view style="width: 670rpx;">
								<u-input type="textarea" height="100" v-model="leave_reason" :border="border"
									:autoHeight="true" />
							</view>
							<view class="warn-center" v-if="isReasonEmpty">原因不得为空</view>
						</view>
					</u-form-item>


					<u-form-item label-position="top" :border-bottom="true" label="上传凭证" prop="photo" label-width="150">

						<!-- 	<u-upload 
					width="160" 
					height="160" 
					:action="upload_path"
					:header="upload_header"
					:max-size="5 * 1024 * 1024" 
					max-count="2"></u-upload> -->


						<view class="pre-box">
							<view class="pre-item" v-for="(item, index) in img_url" :key="index">
								<image class="voucher" :src="addPrefix(item)" mode="aspectFill" @click="zoomImg(item)">
								</image>
							</view>

							<u-icon name="photo" size="100" color="#c0c4cc" @click="chooseImages"
								v-show="img_url.length < 2"></u-icon>
						</view>

						<!-- <u-icon name="photo" size="60" color="#c0c4cc" @click="chooseImages"></u-icon> -->

					</u-form-item>

				</view>
			</view>

			<view style="width: 100%; height: 20rpx;"></view>
			<view class="submit" @click="submit()">立即提交</view>
			
			<!-- <image src="http://32v7r91942.zicp.vip/admin/sys-file/lengleng/fa5dfcd841a545b387f5c67e4a307f58.PNG"></image> -->

		</view>

		<!-- 图片放大查看 -->
		<view class="root">
			<u-mask :show="zoomImgMask">

				<!-- <view class="rect" @tap.stop></view> -->
				<transition name="slide-fade">
					<view class="img-box">
						<image :src="zoomImgSrc"></image>
						<!-- <u-button >1</u-button> -->

						<view style="margin-top: 100rpx;">
							<u-icon name="close" color="#ffffff" size="60" @click="zoomImgMask=false"
								style="margin-right: 60rpx; margin-top: -14rpx;"></u-icon>
							<u-icon name="trash-fill" color="#ffffff" size="70" @click="delImg(zoomImgSrc)"></u-icon>
						</view>
					</view>
				</transition>
			</u-mask>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(option) {


			// 此页面提供再次修改功能 修改用户已经撤销的请假申请
			console.log('请假onLoad', option)
			if (Object.keys(option).length !== 0) {
				let info = JSON.parse(option.info)
				console.log(info)
				let leavePeriod = info.leavePeriod.split('~')

				this.start_time = leavePeriod[0],
					this.end_time = leavePeriod[1],
					this.region = info.leaveDestination,
					this.leave_reason = info.leaveReason,
					this.curIndex = info.leaveType, // 请假类型
					this.is_additional_leave = info.leaveIsSupplement ? '是' : '否', // 补假
					this.img_url = info.leaveVoucher.split('~')
			}

			// this.$u.api.getAllDeployment().then(cnm => {
			// 	/* 目前只有一个请假流程 所以先写死 */
			// 	console.log('res')
			// 	console.log('res', cnm)
			// }).catch(err => {
			// 	console.log('err', err)
			// })

		},
		data() {
			return {
				// upload_path: 'http://10.255.212.6/admin/sys-file/upload',
				upload_header: {
					"Authorization": 'Bearer ' + this.$store.state.access_token
				},


				start_time_picker_show: false,
				end_time_picker_show: false,
				destination_picker_show: false,
				zoomImgMask: false,

				clicked: false, 	// 按下提交后进行合法性校验

				start_time: '请选择起始时间',
				end_time: '请选择结束时间',
				region: '请选择去向',
				leave_reason: '',
				curIndex: 0, // 请假类型
				is_additional_leave: '否', // 补假
				img_url: [],

				zoomImgSrc: '../../static/circle.png',
				
				border: true,
				top: 'top',

				leave_type: [{
						name: '事假'
					},
					{
						name: '病假'
					},
					{
						name: '其他'
					}
				],

				radioList: [{
						name: '是',
						checked: true,
						disabled: false
					},
					{
						name: '否',
						checked: false,
						disabled: false
					}
				],


				time_params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					// second: false	
				},
			};
		},
		computed: {
			getVoucher: function() {
				if (this.img_url.length == 0) return '~'
				else if (this.img_url.length == 1) return this.img_url[0] + '~'
				else if (this.img_url.length == 2) return this.img_url[0] + '~' + this.img_url[1]
			},
			isReasonEmpty: function() {
				return this.clicked && this.leave_reason === ''
			},
			startTimeValidator: function() {
				return this.clicked && this.start_time === '请选择起始时间'
			},
			endTimeValidator: function() {
				return this.clicked && this.end_time === '请选择结束时间'
			},
			destinationValidator: function() {
				return this.clicked && this.region === '请选择去向'
			}
			
		},
		methods: {
			zoomImg(item) {
				this.zoomImgSrc = this.addPrefix(item)
				this.zoomImgMask = true
			},
			delImg(item) {
				console.log('to remove', item)
				this.zoomImgMask = false

				for (let i = 0; i < this.img_url.length; i++) {
					if (this.addPrefix(this.img_url[i]) === item) {
						console.log(true)
						this.img_url.splice(i, 1)
						break
					}
				}
			},
			chooseImages() {
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: 'http://32v7r91942.zicp.vip/admin/sys-file/upload', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								"Authorization": 'Bearer ' + this.$store.state.access_token
							},
							formData: {
								// 'user': 'test'
							},
							success: (res) => {
								let js_str = res.data
								console.log(js_str)
								// console.log(eval('(' + res.data + ')'))
								console.log('parse', JSON.parse(res.data).data.url)
								let url = JSON.parse(res.data).data.url
								this.img_url.push(url)
							},
							error: (err) => {
								console.log(err)
							}
						});
					}
				});
			},

			addPrefix(item) {
				return this.$store.state.baseUrl + item
			},

			regionConfirm(e) {
				this.region = e.province.label + '-' + e.city.label + '-' + e.area.label;
			},
			startTimeConfirm(e) {
				this.start_time = e.year + '-' + e.month + '-' + e.day + ' ' +
					e.hour + ':' + e.minute + ":00"
			},
			endTimeConfirm(e) {
				this.end_time = e.year + '-' + e.month + '-' + e.day + ' ' +
					e.hour + ':' + e.minute + ":00"
			},
			submit() {
				console.log('submit')
				let that = this
				that.clicked = true
				this.$u.api.getAllDeployment().then(res => {
					
					// 合法性校验
					if (!this.isReasonEmpty && !this.startTimeValidator && 
					    !this.endTimeValidator && !this.destinationValidator &&
						this.end_time > this.start_time) {
							let typeIndex = this.curIndex
							let param = {
								// 默认获取已经部署的第1个请假流程
								deploymentId: res.data[0].deploymentId,
								leaveIsSupplement: this.is_additional_leave == '是',
								leaveDestination: this.region,
								leavePeriod: this.start_time + '~' + this.end_time,
								leaveReason: this.leave_reason,
								leaveType: typeIndex,
								leaveVoucher: this.getVoucher // computed
							}
							console.log('表单信息', param)
							
							that.$u.api.submitLeave(param).then(msg => {
								console.log('msg', msg)
								uni.showToast({
									title: '请假成功',
									duration: 2000,
									icon: 'success',
									success: function() {
										setTimeout(() => {
											uni.redirectTo({
												url: '/pages/leave_statistics/index'
											})
										}, 2000)
							
									}
								});
							
							}).catch(err => {
								console.log(err)
								this.$refs.uToast.show({
									title: '请假失败',
									type: 'error'
								})
							})
						} else {
							this.$refs.uToast.show({
								title: '表单非法',
								type: 'error'
							})
						}
					// 不合法什么不做
				})
			}
		}
	};
</script>

<style>
	.caption {
		font-size: 18px;
		font-weight: 600;
		padding-bottom: 10rpx;
	}

	.time_area {
		width: 70%;
		background-color: #007AFF;
	}

	.wrap {
		padding: 30rpx;
		background-color: #FFFFFF;
	}

	.indent {
		padding-left: 6px;

	}

	.leave-type {
		border-radius: 30rpx;
		border: #007AFF 1px solid;
		width: 85rpx;
		height: 60rpx;
		margin-left: 30rpx;
		font-size: 8px;
		padding: 0;
		background-color: white;
	}

	.picker {
		text-align: center;
		right: 0;
		width: 100%;
		/* margin-left: 20%; */
		margin-top: -10rpx;
		height: 60rpx;
		padding: 0;
		font-size: 11px;
		background-color: transparent;
		border-radius: 30rpx;
		border: #007AFF 0.5px solid;
		/*box-shadow: #b6b6b6 1px 1px; */
	}

	.active {
		color: white;
		background-color: #007AFF;
	}

	.voucher {
		width: 100rpx;
		height: 100rpx;
		/* margin: 10rpx 10rpx; */
		align-self: center;
	}

	.pre-box {
		display: flex;
		flex-direction: column;
		flex-direction: row;
		align-items: center;
	}

	/* .root {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	} */

	.img-box {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.warn-center {
		color: red;
		/* width: 70rpx; */
		text-align: center;
		font-weight: 700;
	}
</style>
